<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>我的中心</title>
		<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<meta name="format-detection" content="telephone=no">
		<link rel="stylesheet" type="text/css" href="../../css/mui.min.css" />
		<link rel="stylesheet" type="text/css" href="../../css/app.css"/>
		<link rel="stylesheet" type="text/css" href="../../css/utils.css" />
		<style>
			.mui-off-canvas-left,
			.mui-off-canvas-right {
				position: absolute;
				z-index: -1;
				top: 0;
				bottom: 0;
				visibility: hidden;
				box-sizing: content-box;
				width: 50%;
				min-height: 100%;
				background: #333;
				-webkit-overflow-scrolling: touch
			}
			
			.mui-off-canvas-wrap {
				overflow: hidden;
				width: 100%;
			}
			
			.mui-scroll-wrapper {
			    /* position: absolute; */
			    z-index: 2;
			    /* top: 0; */
			    /* bottom: 0; */
			    /*left: 0;
			    /*overflow: hidden;*/
			    width: 100%;
			}
			
			.certificate{
				background-image: url(../../img/grzx/new/zhengshu_03.png); 
				background-repeat: no-repeat;
				background-size: 100%;
				width: 300px;
				height: 176px;
				padding-top: 72px;
				margin: 10px auto;
			}
			
			.noticnav{
				background-color: #dde9ec;
				margin-top: 16px;
				width: 100%;
				height: 75px;
				display: flex;
			}
			
			.mui-btn-block {
			    font-size: 16px;
			    display: block;
			    width: 70%;
			    margin-bottom: 5px;
			    padding: 5px 0;
			    background-color: #00a8c6;
			}
			
			.jobnote{
				line-height: 150%; 
				color: #464646; 
				font-size: 15px;
				overflow: hidden; 
				text-overflow: ellipsis; 
				display: -webkit-box; 
				-webkit-line-clamp: 2; 
				-webkit-box-orient: vertical;
				text-align:justify;
				text-justify:inter-ideograph;
			}
		</style>
	</head>
	<body style="background-color: white; text-align: center; width: 100%;">
			
		<div id="offCanvasWrapper" class="mui-off-canvas-wrap mui-draggable" style="background-color: white;">
			
			<!--菜单部分-->
			<aside id="offCanvasSide" class="mui-off-canvas-left" style="background-color: white; border: 1px solid #F5F5F5;">
				<div id="offCanvasSideScroll" class="mui-scroll-wrapper">
					<div class="mui-scroll">
						<div class="content" style="text-align: center; margin-top: 47px;">
							<span>
								<label id="labMyiconimg" for="iconImageFile" style="display: block;">
									<img id="myiconimg" src="../../img/index/new/touxiang_03.png" style="width: 76px;" onclick="ttt();" />
								</label>
								<span id="usernick" style="display: block; color: #909090; font-size: 16px;">小辣椒</span>
							</span>
							<form id="uploadForm" name="uploadForm" enctype="multipart/form-data" style="">
								<input type="file" id="iconImageFile" name="iconImageFile" style="position: absolute; clip: rect(0 0 0 0);" onchange="upload();">
							</form>
						</div>
						<div id="menu-nav" style="margin-top: 40px;">
							<div style="margin: 10px 0px 0px 0px; height: 40px; background-color: #f1f6f7;">
								<a href="my-news.html" style="color: #616161;">
									<span style="display: block; float: left; margin-left: 20px; margin-top: 11px;">我的消息</span>
								</a>
							</div>
							
							<div style="margin: 1px 0px 0px 0px; height: 40px; background-color: #f1f6f7;">
								<a href="note.html" style="color: #616161;">
									<span style="display: block; float: left; margin-left: 20px; margin-top: 11px;">我的帖子</span>
								</a>
							</div>
							<div style="margin: 1px 0px 0px 0px; height: 40px; background-color: #f1f6f7;">
								<a href="my-collection.html" style="color: #616161;">
									<span style="display: block; float: left; margin-left: 20px; margin-top: 11px;">我的收藏</span>
								</a>
							</div>
							
							<div style="margin: 1px 0px 0px 0px; height: 40px; background-color: #f1f6f7;">
								<a href="my-information.html" style="color: #616161;">
									<span style="display: block; float: left; margin-left: 20px; margin-top: 11px;">个人信息</span>
								</a>
							</div>
							
							<div style="margin: 30px 0px 0px 0px; height: 40px; background-color: #f1f6f7;">
								<a href="feedback.html" style="color: #616161;">
									<span style="display: block; float: left; margin-left: 20px; margin-top: 11px;">帮助与反馈</span>
								</a>
							</div>
							<div style="margin: 1px 0px 0px 0px; height: 40px; background-color: #f1f6f7;">
								<a href="note.html" style="color: #616161;">
									<span style="display: block; float: left; margin-left: 20px; margin-top: 11px;">紧急求助</span>
								</a>
							</div>
							
							<div style="margin-top: 30px;" align="center">
								<button id="logout" type="button" class="mui-btn mui-btn-block" style="color: #FFFFFF;">注销</button>
							</div>
							
						</div>
						
					</div>
				</div>
			</aside>
			
			<div class="mui-inner-wrap">
				<div id="offCanvasContentScroll" class="mui-content mui-scroll-wrapper" style="background-color: #ebf3f4;">
					<div class="mui-scroll">
						<div id="top-nav" style="margin-top: 10px; margin-left: 10px;">
							<a id="offCanvasBtn" href="#offCanvasSide" class="mui-icon mui-action-menu mui-pull-left">
								<img src="../../img/grzx/new/icon_03.png" style="width: 16px;" />
							</a>
							
							<div id="dvChange" style="color: #909090; margin-right: 23px; float: right;">
								<span>大宝</span>
								<img src="../../img/grzx/new/xiangxia_03.png" style="width: 10px; margin-left: -2px;" />
							</div>
						</div>
						
						<!--
	                    	作者：xuzhao_deng@sina.com
	                    	时间：2017-01-17
	                    	描述：个人证书
	                    -->
						<div id="dvCertificate" style="margin-top: 43px;">
							<div class="certificate">
								<div id="haveCertificate" style="display: none;">
									<div style="text-align: center; ">
										<h5 style="display: block; font-size: 16px; color: #909090; margin-top: 6px;">恭喜你已成为本宇宙</h5>
										<h5 style="display: block; font-size: 16px; color: #909090; margin-top: 3px;">第<span id="ranking">10000</span>位合格父母</h5>
									</div>
									<div style="float: right; margin-right: 20px;">
										<span id="structure" style="display: block; font-size: 11px; color: #909090; margin-left: 10px;">345教育</span>
										<span id="issueTime" style="display: block; font-size: 11px; color: #909090; margin-top: -9px;">2016-12-12</span>
									</div>
								</div>
								<div id="noCertificate" style="display: none; text-align: center; color: #909090; font-size: 14px;">
								</div>
							</div>
						</div>
						<!--
	                    	作者：xuzhao_deng@sina.com
	                    	时间：2017-01-17
	                    	描述：通知栏目
	                    -->
						<div class="noticnav">
							<div id="noticnavleft" style="width: 18%; display: flex;">
								<div style="color: #909090; margin-top: 15px; text-align: center; margin-left: 10px;">
									<span style="display: block;">今日</span>
									<span style="display: block;">通知</span>
								</div>
								<div style="padding-top: 3px; margin-left: 10px;">
									<img src="../../img/grzx/new/xiaoguoxian_03.png" height="70"/>
								</div>
							</div>
							<div id="noticnavcenter" style="width: 70%; text-align: left; margin-top: 15px;">
								<p class="jobnote">
								作业如下：1、读一篇文章并写出都后感 2、写一篇关于“明天”为话题的小作文</p>
							</div>
							<div id="noticnavrigth" style="width: 12%; display: flex;">
								<div style="padding-top: 3px; margin-left: 6px;">
									<img src="../../img/grzx/new/xiaoguoxian_03.png" height="70"/>
								</div>
								<div style="padding-top: 25px; margin-left: 12px;">
									<img src="../../img/grzx/new/gengduo_03.png" style="width: 6px;" />
								</div>
							</div>
						</div>
						
						<!--
	                    	作者：xuzhao_deng@sina.com
	                    	时间：2017-01-17
	                    	描述：内容区
	                    -->
	                    <div id="dv-content" style="text-align: left; margin-left: 15px; margin-top: 23px; margin-right: 10px;">
	                    	<!--<div style="margin-top: 15px;">
	                    		<div id="con-left" style="float: left; margin-right: 10px;">
	                    			<span>
	                    				<img src="../../img/grzx/new/xiaotouxiang_03.png" style="width: 35px;" />
	                    			</span>
	                    			<span style="display: block; color: #616161; font-size: 13px;">胡老师</span>
	                    		</div>
	                    		<div id="con-center" style="margin-left: 48px;">
	                    			<span style="background-color: #FFFFFF; display: block; padding-top: 6px; padding-bottom: 1px;">
	                    				<a href=""><p style="color: #616161; font-size: 14px; line-height: 130%;">今天好好复习，明天期末开始啦，考一个好成绩，过年也放心。。。</p></a>
	                    			</span>
	                    			<span style="display: block; color: #909090; font-size: 12px; margin-top: 5px;">
	                    				<span style="display: block; float: left;">2016-12-12 07:30</span>
	                    				<span style="display: block; float: right; margin-right: 20px;"><img src="../../img/grzx/new/pinglun_03.png" style="width: 16px;"></span>
	                    			</span>
	                    		</div>
	                    		<div id="con-right">
	                    			
	                    		</div>
	                    	</div>
	                    	<hr style="width: 100%; height: 1px; background-color: #FFFFFF; margin-top: 40px;" />-->
	                    	
	                    </div>
					</div>
				</div>
				<div class="mui-off-canvas-backdrop"></div>
			</div>
		</div>
	</body>
	<script src="../../js/mui.min.js"></script>
	<script src="../../js/jquery-1.8.3.min.js"></script>
	<script src="../../js/plugin/jquery-form.js"></script>
	<script src="../../js/bus/pubfun.js"></script>
	<script src="../../js/utils/http.utils.js"></script>
	<script>
		mui.init({
			swipeBack: true,
		});
		mui("#offCanvasContentScroll").scroll();
		mui("#offCanvasSideScroll").scroll();
	</script>
	<script>
		var $orgId;
		var $wxfwid = localStorage.getItem("wxfwid");
		if($wxfwid == null || $wxfwid == "" || $wxfwid == undefined || $wxfwid == "null"){
			$orgId = getQueryString(window.location.search, "orgId");
			localStorage.setItem("wxfwid", $orgId);
		} else {
			$orgId = $wxfwid
		}
		var $userLogin = JSON.parse(localStorage.getItem("login-user-parent"));
		var $uid;
		
		window.onload = function(){
			if($userLogin == null || $userLogin == null || $userLogin == undefined || $userLogin == "null"){
				mui.openWindow({
					url : "../../login.html"
				});
			} else {
				$uid = $userLogin.userId;
				getLoginUserInfo($uid);
				getPostsRanking($uid);
				getPostsLst($uid);
			}
		}
		
		function getLoginUserInfo($userid){
			mui.ajax({
				url: $request_url.getUserInfo,
				type: "get",
				headers: {
					"Authorization": $headers_authorization
				},
				data: {
					userId : $userid
				},
				dataType: "json",
				success: function(dat) {
					if(dat.code == 0){
						if(dat.result != null && dat.result != ""){
							//判断存储里是否有用户信息
							var $localUser = localStorage.getItem("logininfo");
							if($localUser == null || $localUser == "" || $localUser == undefined || $localUser == "null"){
								localStorage.setItem("logininfo", dat.result);
							}
							document.getElementById("usernick").innerHTML = dat.result.nickName;
						}
					}
				}, error : function(err) {
					
				}
			});
		}
		
		function getPostsRanking($userid){
			mui.ajax({
				url: $request_url.getPostsRanking,
				type: "get",
				headers: {
					"Authorization": $headers_authorization
				},
				data: {
					userId : $userid
				},
				dataType: "json",
				success: function(dat) {
					if(dat.code == 0){
						document.getElementById("haveCertificate").style.display = "";
						document.getElementById("noCertificate").style.display = "none";
						document.getElementById("ranking").innerHTML = dat.result.orderNumber;
						document.getElementById("structure").innerHTML = dat.result.issueOrg;
						document.getElementById("issueTime").innerHTML = stringConTime(dat.result.issueTime, "ymd");
					} else {
						document.getElementById("haveCertificate").style.display = "none";
						document.getElementById("noCertificate").style.display = "";
						document.getElementById("noCertificate").innerHTML = "<br/>" + dat.message;
					}
				}, error : function(err){
					
				}
			});
		}
		
		function getPostsLst($uid){
			var $conlst =  document.getElementById("dv-content")
			for(var i = 0; i < 3; i ++){
				var $pdiv = document.createElement("div");
				$pdiv.innerHTML = createPostsHtmlTem(null, i);
				$conlst.appendChild($pdiv);
			}
		}
		
		
		
		function createPostsHtmlTem($info, $num){
			var $postsHtml = 
			'<div style="margin-top: 15px;">'
	    	+	'<div id="con-left" style="float: left; margin-right: 10px;">'
	    	+		'<span>'
	    	+			'<img src="../../img/grzx/new/xiaotouxiang_03.png" style="width: 35px;" />'
	    	+		'</span>'
	    	+		'<span style="display: block; color: #616161; font-size: 13px;">胡老师</span>'
	    	+	'</div>'
	    	+	'<div id="con-center" style="margin-left: 48px;">'
	    	+		'<span style="background-color: #FFFFFF; display: block; padding-top: 6px; padding-bottom: 1px;">'
	    	+			'<a href="#"><p style="color: #616161; font-size: 14px; line-height: 130%;">今天好好复习，明天期末开始啦，考一个好成绩，过年也放心。。。</p></a>'
	    	+		'</span>'
	    	+		'<span style="display: block; color: #909090; font-size: 12px; margin-top: 5px;">'
	    	+			'<span style="display: block; float: left;">2016-12-12 07:30</span>'
	    	+			'<span style="display: block; float: right; margin-right: 20px;"><img src="../../img/grzx/new/pinglun_03.png" style="width: 16px;"></span>'
	    	+		'</span>'
	    	+	'</div>'
	    	+	'<div id="con-right">'
	    	+	'</div>'
	    	+'</div>'
	    	+'<hr style="width: 100%; height: 1px; background-color: #FFFFFF; margin-top: 40px;" />';
	    	return $postsHtml;
		}
		
		
		mui("#offCanvasSideScroll").on("tap", "a", function(){
			mui.openWindow({
				url : this.href
			});
		});
		
		document.getElementById("logout").addEventListener("tap", function(){
			localStorage.removeItem("login-user-parent");
			mui.openWindow({
				url : "../../login.html"
			});
		});
		
	</script>
	
	<script>
		/*$("#iconImageFile").change(function(){
			$("#uploadForm").ajaxSubmit({
				type : "post",
				url: $http_prefix + "/api/sys/upload",
				dataType : "json",
				headers : {
					"Authorization" : $headers_authorization
				},
				success:function(dat) {
					if(dat.code == 0){
						if(dat.result != null && dat.result != ""){
							updateUserImg(dat.result);
						}
					}
				},
				error:function(data) {
					console.log(JSON.stringify(data));
				}
			});
		});*/
		
		document.getElementById("labMyiconimg").addEventListener("tap", function(){
			this.setAttribute("for", "iconImageFile");
		});
		
		document.getElementById("iconImageFile").addEventListener("change", function(){
			$("#uploadForm").ajaxSubmit({
				type : "post",
				url: $http_prefix + "/api/sys/upload",
				dataType : "json",
				headers : {
					"Authorization" : $headers_authorization
				},
				success:function(dat) {
					if(dat.code == 0){
						if(dat.result != null && dat.result != ""){
							updateUserImg(dat.result);
						}
					}
				},
				error:function(data) {
					console.log(JSON.stringify(data));
				}
			});
		});
		
		function upload(){
			$("#uploadForm").ajaxSubmit({
				type : "post",
				url: $http_prefix + "/api/sys/upload",
				dataType : "json",
				headers : {
					"Authorization" : $headers_authorization
				},
				success:function(dat) {
					if(dat.code == 0){
						if(dat.result != null && dat.result != ""){
							updateUserImg(dat.result);
						}
					}
				},
				error:function(data) {
					console.log(JSON.stringify(data));
				}
			});
		}
		
		function updateUserImg($img){
			mui.ajax({
				url : $request_url.updateUserInfo,
				type : "post",
				headers: {
					"Authorization": $headers_authorization
				},
				dataType : "json",
				data : {
					userId : $userLogin.userId,
					backImage : $img
				}, 
				success : function(dat){
					if(dat.code == 0){
						mui.toast("上传成功!");
						document.getElementById("myiconimg").value = $img;
					}
				}, error : function(err){
					mui.toast("服务繁忙...");
				}
			});
		}
		
	</script>
</html>
